<template>
  <form-create
    :value.sync="formData"
    v-model="fapi"
    :rule="rule"
    :option="option"
    @submit="onSubmit"
    v-loading="pageLoading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  ></form-create>
</template>

<script>
import formCreate from "@form-create/element-ui";
import API from "../API/CommonAPI.js";
export default {
  components: {
    formCreate: formCreate.$form(),
  },
  data() {
    return {
      pageLoading: false,
      formId: null,
      formData: {},
      fapi: null,
      rule: [],
      option: {},
    };
  },
  created() {
    this.formId = this.$route.query.Id;
    console.log("formId", this.formId);
    if (this.formId) {
      this.getFormDetail(this.formId);
    }
  },
  methods: {
    onSubmit(formData) {
      //todo 提交表单
    },
    getFormDetail(formId) {
      this.pageLoading = true;
      API.FormSingle({
        Id: formId,
      })
        .then((res) => {
          this.pageLoading = false;
          if (res.code == 200) {
            if (res.data && res.data.Json) {
              this.rule = formCreate.parseJson(res.data.Json)
              if (res.data.Options) {
                this.option = formCreate.parseJson(res.data.Options)
              }
            }
          }
        })
        .catch((err) => {
          console.log(err);
          this.pageLoading = false;
        });
    },
  },
};
</script>
